<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <title>下单</title>
    <link rel="icon" href="/static/img/login.jpg" type="img/x-ico" />
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/signin.css" rel="stylesheet">
    <script src="/js/jquery.js"></script>
</head>
<body class="text-center">
<!--  用户登录form表单 -->
<div class="form-signin">
<!--    <img class="mb-4" src="/img/login.jpg" width="72" height="72">-->

    <input  id="makerOrder" type="button" value="开始下单" class="btn btn-lg btn-primary btn-block" onclick="makerOrder()" />
    <input  id="pay" type="button" value="支付订单。。。" class="btn btn-lg btn-primary btn-block" onclick="pay()" style="background-color: #00BB00" />
<!--    <input  type="button" value="注册新账号" class="btn btn-lg btn-primary btn-block"  />-->

    <div id="orderList">
<!--        <span class="form-control" style="float: right">订单 >>>> 1  已支付</span>-->
<!--        <span class="form-control" style="float: right">订单 >>>> 2  超时未支付</span>-->
    </div>


    <input  id="orderCode" type="hidden" />
</div>
</body>

<script>

    showMaker();
    function showMaker() {
        $("#makerOrder").show();
        $("#pay").hide();
        $("#orderList").hide();
    }
    function showPay() {
        $("#makerOrder").hide();
        $("#pay").show();
        $("#orderList").hide();
    }
    function showList() {
        $("#makerOrder").hide();
        $("#pay").hide();
        $("#orderList").show();
    }
    
    
    function makerOrder() {
        $.ajax({
            url:"/makeOrder",
            type:"GET" ,
            crossDomain: true,
            // 下面这句话允许跨域的cookie访问
            xhrFields: {
                withCredentials: true
            },
            success:function (data,status,xhr) {
                console.log('*********** 下单返回 **********data:',data);
                if(data.code == 0){
                    $("#orderCode").val(data.result.orderCode);
                    showPay();
                    // window.location.href = "pay?orderCode=" + data.result.orderCode;
                }

            },
            error:function (err) {
                console.log(err);
                alert(err.responseText);
            }
        });
    };

    function pay() {
        let orderCode = $("#orderCode").val();
        console.log('orderCode >>>>>>',orderCode)
        $.ajax({
            url:"/pay?orderCode=" + orderCode,
            type:"GET" ,
            crossDomain: true,
            // 下面这句话允许跨域的cookie访问
            xhrFields: {
                withCredentials: true
            },
            success:function (data,status,xhr) {
                console.log('*********** 支付返回 **********data:',data);
                if(data.code == 0){
                    findAll();
                    // window.location.href = "pay?orderCode=" + data.result.orderCode;
                }else{
                    findAll();
                    alert(data.msg);
                }

            },
            error:function (err) {
                console.log(err);
                alert(err.responseText);
            }
        });
    };


    function findAll() {
        $.ajax({
            url:"/findAll" ,
            type:"GET" ,
            crossDomain: true,
            // 下面这句话允许跨域的cookie访问
            xhrFields: {
                withCredentials: true
            },
            success:function (data,status,xhr) {
                console.log('*********** 获取订单列表返回 **********data:',data);

                if(data.code == 0){

                    let result = data.result;
                    for(let res of result){
                        let span = '<span class="form-control" style="float: right">' +
                            res.name + '        '  + (res.isPay == 0?'未支付':'已支付') + '</span>';
                        $("#orderList").append(span);
                    }
                    showList();
                }else{
                    alert("查询订单列表出错")
                }

            },
            error:function (err) {
                console.log(err);
                alert(err.responseText);
            }
        });
    };

</script>


<style>
    .form-signin {
        width: 100%;
        max-width: 330px;
        padding: 15px;
        margin: 0 auto;
    }
    .form-signin .form-control {
        margin-top: 15px;
    }
</style>

</html>